<!DOCTYPE html>
<div class="panel panel-info">
	<div class="panel-heading">
		<form style="display: inline-block;" class="form-inline">
			<div class="form-group">
				<input type="text" class="form-control input-sm" id="ipt_name" placeholder="书名">
			</div>
			<div class="form-group">
				<input type="text" class="form-control input-sm" id="ipt_low" placeholder="最低价">
			</div>
			<div class="form-group">
				<input type="text" class="form-control input-sm" id="ipt_top" placeholder="最高价">
			</div>
			<button type="button" class="btn btn-default btn-sm" onclick="search()"><span class="glyphicon glyphicon-search"></span></button>
		</form>
		<div class="pull-right">
			<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal_add">添加</button>
			<button type="button" class="btn btn-success btn-sm">批量删除</button>
		</div>
	</div>
	<div class="panel-body">
		<table class="table table-striped table-bordered table-hover" id="table">
			<thead>
				<tr>
					<th class="text-center"><input type="checkbox" name="cb_select_all" /></th>
					<th>id</th>
					<th>名称</th>
					<th>价格</th>
					<th>出版日期</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
	</div>
	<div class="panel-footer">总价格:<span id="span_result"></span></div>
</div>
<script type="text/javascript">
	$(function() {
		console.log("首页2加载成功")
		let books = [{
				id: 1,
				name: 'Java从入门到放弃',
				price: 80,
				tdate: '2020-07-01',
				count: 1
			},
			{
				id: 2,
				name: 'Vue从入门到放弃',
				price: 90,
				tdate: '2020-07-02',
				count: 1
			},
			{
				id: 3,
				name: 'Mysql从入门到放弃',
				price: 100.01,
				tdate: '2020-07-03',
				count: 1
			},
			{
				id: 4,
				name: 'JavaScript从入门到放弃',
				price: 70.00,
				tdate: '2020-07-04',
				count: 1
			},
			{
				id: 5,
				name: 'Jquery从入门到放弃',
				price: 70.00,
				tdate: '2020-07-04',
				count: 1
			},
			{
				id: 6,
				name: '啥都从入门到放弃',
				price: 70.00,
				tdate: '2020-07-04',
				count: 1
			},
		];
		
		/*
			dom
			    l - length changing input control
			    f - filtering input
			    t - The table!
			    i - Table information summary
			    p - pagination control
			    r - processing display element
		*/
		$("#table").DataTable({
			"data": books,
			"dom": 'rtlip',
			"pageLength": 5,
			"order": [
				[1, 'asc']
			],
			"lengthMenu": [5, 10, 25, 50],
			"language": {
				"processing": "<div class='myDatatablesLodding'><img src='/images/loading02.gif' alt=''></div>",
				// "processing": '<span> </span>',
				"emptyTable": "<div style='text-align:center;font:bold 13px/22px arial,sans-serif;color:red;'>没有检索到数据！</div>",
				"zeroRecords": "<div style='text-align:center;font:bold 13px/22px arial,sans-serif;color:red;'>没有检索到数据！</div>",
				"info": "显示 _START_ 到 _END_ 条记录，总共 _TOTAL_ 条",
				"infoEmpty": "显示 0 到 0 条记录，总共 0 条",
				"lengthMenu": "每页显示 _MENU_ 条",
				"paginate": {
					"first": "首页",
					"last": "尾页",
					"previous": `<a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>`,
					"next": `<a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>`
				}
			},
			"columns": [{
				"data": "id", //指定对象的属性，没render函数时，则属性值
				"className": "text-center",
				"orderable": false,
				"render": function(data, type, row, meta) {
					return `<input type="checkbox" name="cb_select" value="${data}">`;
				}
			}, {
				"data": "id"
			}, {
				"data": "name"
			}, {
				"data": "price"
			}, {
				"data": "tdate"
			}, {
				"data": "count"
			}, {
				"data": null,
				"render": function(data, type, row, meta) {
					// console.log(data, type, row, meta);
					return `
							<button type="button">编辑</button>
							<button type="button">删除</button>
						`;
				}
			}]
		});
		
		$("#table_wrapper").append("<div id='table_status'></div>");
		$("#table_info").appendTo("#table_status");
		$("#table_paginate").appendTo("#table_status");
		$("#table_length").appendTo("#table_status");
		$("#table_paginate").find("ul").addClass("pagination-sm");
	})
</script>
